<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <title>工作人员列表</title>
    
	<link rel="stylesheet" type="text/css" href="<%=request.getScheme() + "://" + request.getServerName() + request.getContextPath() %>/css/bootstrap.min.css">

  </head>
  
  <body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div id="menu" class="span2 well">
				<h3>菜单栏</h3>
				<div id="addWorkerButton">
					<a href="#"><strong>添加工人</strong></a>
				</div>
			</div>
			<div id="addWorkerPage" class="span9 well">
				<form id="ajaxAddWorkerForm" action="worker/ajaxAddWorker.action"
					method="post" enctype="multipart/form-data">
					<input type="file" name="workerPhoto" placeholder="上传头像" /><br /> <input
						type="text" name="worker.name" placeholder="请输入姓名" /><br /> <input
						type="text" name="worker.phone" placeholder="请输入电话号码" /><br /> <input
						type="text" name="worker.borrowMoney" placeholder="请输入借资数量" /><br /> <input
						type="text" name="worker.totalMoney" placeholder="请输入总钱数" /><br />
					<lable>主要工作类型：</lable>
					<div class="offset1">
						<input type="radio" name="worker.primaryWork" /> <span>木工</span><br /> <input
							type="radio" name="worker.primaryWork" /> <span>木工(计时)</span><br /> <input
							type="radio" name="worker.primaryWork" /> <span>钢筋工</span><br /> <input
							type="radio" name="worker.primaryWork" /> <span>钢筋工(计时)</span><br /> <input
							type="radio" name="worker.primaryWork" /> <span>混凝土工</span><br /> <input
							type="radio" name="worker.primaryWork" /> <span>混凝土工(计时)</span><br /> <input
							type="radio" name="worker.primaryWork" /> <span>杂工</span><br /> <input
							type="radio" name="wirjer,primaryWork" /> <span>杂工(计时)</span><br />
					</div>
					<lable>性别：</lable>
					<br />
					<div class="offset1">
						<input type="radio" name="worker.sex" /> <span>男</span> <input
							type="radio" name="worker.sex" /> <span>女</span>
					</div>

					<input type="text" name="validateCode" placeholder="请输入验证码..." /> <span
						id="jcaptcha"> <img id="jcaptcha"
						src="<%=request.getScheme() + "://" + request.getServerName()
					+ request.getContextPath()%>/worker/jcaptcha.jpg"
						style="height:25px;margin-top:-10px" /> <span
						style="color:#D4D7DB">点击更换验证码</span> </span>

					<div id="ajaxAddWorker">
						<button id="ajaxAddWorker" class="btn btn-large btn-primary">添加</button>
					</div>
				</form>
				<iframe src="" name="addWorkerIframe"></iframe>
			</div>
			<div class="span9 well">
				<table id="worker" class="table table-striped">
					<thead>
						<tr>
							<td>照片</td>
							<td>姓名</td>
							<td>电话</td>
							<td>主要工作</td>
							<td>性别</td>
							<td>借钱数</td>
							<td>总钱数</td>
						<tr>
					</thead>
					<tbody>
						<c:forEach var="worker" items="${requestScope.pager.list }">
							<tr>
								<td><img src="<%=request.getScheme() + "://" + request.getServerName() %>${worker.photo }" width="50" height="50" />
								</td>
								<td>${worker.name }</td>
								<td>${worker.phone }</td>
								<td>${worker.primaryWork}</td>
								<td>${worker.sex }</td>
								<td>${worker.borrowMoney }</td>
								<td>${worker.totalMoney }</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				
			</div>
		</div>
	</div>
	<style type="text/css">
		body{
			margin:0px;
		}
	</style>
	
	This is my JSP page. <br>
    
    <script type="text/javascript" src="<%=request.getScheme() + "://" + request.getServerName()
					+ request.getContextPath()%>/js/jquery.js"></script>
	<script type="text/javascript" src="<%=request.getScheme() + "://" + request.getServerName() + request.getContextPath() %>/js/custom/jquery-show-element.js"></script>
  	<script type="text/javascript">
  		$(document).ready(function(){
  			/*点击切换验证码*/
  			$("#jcaptcha").delegate("#jcaptcha","click",function(){
  				var temp = "<%=request.getScheme() + "://" + request.getServerName() + request.getContextPath()%>";
  				temp = temp + "/worker/jcaptcha.jpg?jcaptchaLocation=" + Math.random();
  				$("#jcaptcha").find("img").attr("src",temp);
  			});
  			/*显示添加工人页面*/
  			$("#addWorkerPage").css("display","none");
  			$("#addWorkerButton").delegate("","click",function(){
	  			$.showElement($("#addWorkerPage"));
  			});
  			
  			$("#ajaxAddWorker").delegate("div #addWorkerPage,#ajaxAddWorker","click",function(){
  				/* var workerPhoto = $("#addWorkerPage input[name=photo]").val();
  				var workerName = $("#addWorkerPage input[name=name]").val();
  				var workerPhone = $("#addWorkerPage input[name=phone]").val();
  				var workerBorrowMoney = $("#addWorkerPage input[name=borrowMoney]").val();
  				var workerTotalMoney = $("addWorkerPage input[name=totalMoney]").val();
  				var workerWork = $("addWorkerPage input[name=work]").val();
  				var workerSex = $("addWorkerPage input[name=sex]").val(); */
  				
  				
  				var addworker = {
  				"photo":$("#addWorkerPage input[name=photo]").val(),
  				"name":$("#addWorkerPage input[name=name]").val(),
  				"phone":$("#addWorkerPage input[name=phone]").val(),
  				"borrowMoney":$("#addWorkerPage input[name=borrowMoney]").val(),
  				"totalMoney":$("addWorkerPage input[name=totalMoney]").val(),
  				"work": $("addWorkerPage input[name=work]").val(),
  				"workerSex":$("addWorkerPage input[name=sex]").val(),
  				};
  				$("#ajaxAddWorkerForm").submit();
  				/* $.ajax({
  					async:true,
  					url:"/worker/ajaxAddWorker.action",
  					timeout:2000,
  					dataType:"json",
  					type:"post",
  					
  				}); */
  				
  				/* var workerValidateCode = $("addWorkerPage input[name=validateCode]").val();
  				alert("ajax before");
  				$.ajax({
  					async:true,
  					url:"ajaxAddWorker.action",
  					type:"post",
  					timeout:2000,
  					dataType:"json",
  					data:{"worker":addworker,"validateCode":workerValidateCode},
  					contentType:"multipart/form-data",
  					complete:function(XMLHttpRequest,textStatus){
  						alert("complete " + textStatus);
  					},
  					success:function(date,textStatus,XHR){
  						alert(textStatus);
  					},
  				});	
  				 */
  				alert("success");
  			});
  		});
  	
  		/* $(document).ready(function(){
  			$("#addWorker").delegate("table tbody,button","click",function(){
  			 $("#worker tbody").append("<tr></tr>");
  		
  			var lastTr = $("#worker tbody tr").last();
  			lastTr.append("<td><a>上传头像</a></td>");
  			lastTr.append("<td><input type='text' style='border:none' class='span1' placeholder='请输入姓名'</td>");	//$(lastTr).append("<td>");
  				alert(lastTr.length);
  			});
  		}); */
  	</script>
  
  </body>
</html>
